<template>
  <div id="zb_app">
    <!-- 头部 -->
    <header>UNI-ADMIN</header>
    <!-- form表单 -->
    <el-form :model="loginForm" :rules="rules" ref="loginForm">
      <!-- 用户名 -->
      <el-form-item prop="username">
        <el-input placeholder="请输入用户名" v-model="loginForm.username"></el-input>
      </el-form-item>
      <!-- 密码 -->
      <el-form-item prop="password">
        <el-input type="password" placeholder="请输入密码" v-model="loginForm.password"></el-input>
      </el-form-item>
      <!-- 登陆 -->
      <el-form-item>
        <el-button type="success" @click="zb_login(loginForm.username)">立即登陆</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
//引入bottstrap样式
import "@/assets/bootstrap.css";
export default {
  // 组件名称
  name: "",
  // 组件参数 接收来自父组件的数据
  props: [],
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {
      loginForm: {
        username: "admin", //用户名
        password: "admin" //密码
      },
      //效验
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      }
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    //登陆
    zb_login(username) {
      this.$refs.loginForm.validate(valid => {
        //成功
        if (valid) {
          //请求接口
          this.$axios
            .post("/admin/login", this.loginForm)
            //接口成功
            .then(res => {
              console.log(res);
              if (res.data.msg == "ok") {
                //登陆成功
                this.$message.success("登陆成功");
                //获取token值
                sessionStorage.setItem("user_token", res.data.data.token);
                //将token值 存入vuex
                this.$store.commit("zb_setToken", res.data.data.token);
                //将用户名存入vuex中
                this.$store.dispatch("zb_getUser",username);
                //跳转到home页面
                this.$router.push("/admin/index");
              }
            })
            //接口失败
            .catch(error => {
              this.$message.error("登陆失败");
              return false;
            });
        }
        //失败
        else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  },
  // 以下是生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 在实例初始化之后，组件属性计算之前，如data属性等
   */
  beforeCreate() {},
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {},
  /**
   * 在挂载开始之前被调用：相关的 render 函数首次被调用。
   */
  beforeMount() {},
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {},
  /**
   * 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
   * 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
   */
  beforeUpdate() {},
  /**
   * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
   * 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
   */
  updated() {},
  /**
   * keep-alive 组件激活时调用。 仅针对keep-alive 组件有效
   */
  activated() {},
  /**
   * keep-alive 组件停用时调用。 仅针对keep-alive 组件有效
   */
  deactivated() {},
  /**
   * 实例销毁之前调用。在这一步，实例仍然完全可用。
   */
  beforeDestroy() {},
  /**
   * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
   * 所有的事件监听器会被移除，所有的子实例也会被销毁。
   */
  destroyed() {}
};
</script>

<style lang="scss" scoped>
// 大盒子
#zb_app {
  width: 32%;
  height: 300px;
  border: #dddddd 1px solid;
  border-radius: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -80%); //第一个代表左右   第二个代表上下
  // 头部
  header {
    width: 100%;
    border-bottom: 1px #dddddd solid;
    font-weight: bold; //字体变粗
    font-size: 25px;
    line-height: 60px;
    text-align: center;
  }
  // form表单
  .el-form {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    // 登陆按钮
    .el-button {
      width: 100%;
    }
  }
}
</style>
